<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" href="../dist/lib/weui.min.css">
<link rel="stylesheet" href="../dist/css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">
<style>
	img{
		width:40px;
		height:40px;
		border-radius:50%;
	}
</style>
  </head>

  <body ontouchstart>
  <!--搜索  -->
  <div class="weui-search-bar" id="searchBar">
	  <form class="weui-search-bar__form">
	    <div class="weui-search-bar__box">
	      <i class="weui-icon-search"></i>
	      <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
	      <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
	    </div>
	    <label class="weui-search-bar__label" id="searchText">
	      <i class="weui-icon-search"></i>
	      <span>搜索</span>
	    </label>
	  </form>
	  <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	</div>
	<!--列表区  -->
   	<div class="weui-cells">
	</div>
	
<script src="../dist/lib/jquery-2.1.4.js"></script>
<script src="../dist/lib/fastclick.js"></script>
<script src="../dist/js/city-picker.min.js"></script>
<script src="../dist/js/jquery-weui.js"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
  $("#city").cityPicker({
	    title: "选择城市",
	    showDistrict: false,
	    onChange: function (picker, values, displayValues) {
	     console.log(values, displayValues);
	    }
	  });
  function initData(){
	  var lists=$(".weui-cells");
	  $.ajax({
			type: "POST",
	       url: "/XYL/alumnus/getClassAlumnus",
	       cache : false,  //禁用缓存
	       dataType: "json",
	       success: function(data) {
	    	   for(var i=0;i<data.length;i++){
	    		   var image;
	    		   if(data.image2){
	    			   image="/xylfiles/images/"+data[i].image2;
	    		   }else{
	    			   image="images/ea7d4219d6b5f200a47c0afc0e9e9e89.jpg";//默认图片
	    		   }
	    		   lists.append(htmlStr(data[i].id,image,data[i].userName));
	    	   }
	       },
	       error: function(result){
	    	   $.toast("出错了！", "cancel", function(toast) {});
	       }
		});
  }
  initData();
  function htmlStr(id,src,name){
	  var html="<a class='weui-cell weui-cell_access' href='javascript:;' id='"+id+"' onclick='list_click(this,"+id+")'>"+
      "<div class='weui-cell__hd'><img src='"+src+"'></div>"+
      "<div class='weui-cell__bd'>"+
        "<p>"+name+"</p>"+
      "</div>"+
      "<div class='weui-cell__ft'>说明文字</div>"+
  	  "</a>";
	  return html;
  }
  
  function list_click(list_a,id){
	  
	  window.location.href="alumnu.html?id="+id; 
  }
  
  
</script>

    
  </body>
</html>
